<template>
    <div>
        <div class="container">
            <el-table :data="tableData"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      v-loading="loading"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header">
                <el-table-column prop="id" label="序号" align="center"></el-table-column>
                <el-table-column prop="nick_name" label="用户名" align="center"></el-table-column>
                <el-table-column prop="ip" label="IP" align="center"></el-table-column>
                <el-table-column prop="create_time" label="登录时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                               :page-size="query.pageSize" :total="pageTotal"
                               @current-change="handlePageChange"></el-pagination>
            </div>

        </div>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'

export default {
    name: 'LoginLogList',
    data() {
        return {
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            pageTotal: 0,
            loading: true
        };
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/log_manage/adminloginlog', this.query)
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            this.tableData = info.data.list
            this.pageTotal = info.data.meta.total;
        },
        // 分页导航
        handlePageChange(val) {
            this.loading = true
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
//时间戳转换
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
